<template>
  <div class="dashboard">
    <aside class="sidebar">
      <ul>
        <!-- 假设权限为1的用户可以看到学生信息和选课管理 -->
        <li v-if="hasPermission('teacher')"><router-link to="/home/studentinfo">学生信息</router-link></li>
        <li v-if="hasPermission('student')"><router-link to="/home/classchoice">选课信息</router-link></li>
        <li v-if="hasPermission('teacher')"><router-link to="/home/classmanage">选课管理</router-link></li>
        <li v-if="hasPermission('student')"><router-link to="/home/gradeinfo">成绩信息</router-link></li>
        <li v-if="hasPermission('teacher')"><router-link to="/home/grademanage">成绩管理</router-link></li>
      </ul>
    </aside>
    <main class="content">
      <router-view></router-view>
    </main>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userPermission: sessionStorage.getItem('userPower')
    }
  },
  methods: {
    hasPermission (requiredPermission) {
      // 检查用户权限
      return this.userPermission === requiredPermission
    }
  }
}
</script>

<style scoped>
.dashboard {
  display: flex;
  height: 100vh;
  font-family: Arial, sans-serif;
}

.sidebar {
  width: 100px;
  background-color: #2c3e50;
  padding: 20px;
  color: #ecf0f1;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li {
  margin: 15px 0;
}

.sidebar a {
  text-decoration: none;
  color: #ecf0f1;
  font-weight: bold;
  transition: color 0.3s, transform 0.3s;
}

.sidebar a:hover {
  color: #3498db;
  transform: translateX(10px);
}

.content {
  flex-grow: 1;
  padding: 20px;
  background-color: #ecf0f1;
  overflow-y: auto;
}

/* Optional: Add some transitions and improve focus states */
.sidebar a:focus {
  outline: none;
  background-color: #34495e;
}
</style>
